<template>
  <div class="editor-container">
    <!-- 顶部工具栏区域 -->
    <header class="editor-toolbar">顶部工具栏区域</header>

    <!-- 主编辑区域 -->
    <main class="editor-main">
      <!-- 左侧组件面板 -->
      <section class="editor-left">
        <MaterialList />
      </section>

      <!-- 中间画布区域 -->
      <section class="editor-center" ref="renderCanvas">
        <Render @drop="handleDrop" @dragover="handleDragOver" />
      </section>

      <!-- 右侧属性面板 -->
      <section class="editor-right">右侧属性面板</section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from "vue";
import Render from "../edit/components/PosterRender/index.vue";
import MaterialList from "./components/MaterialList/index.vue";

// 定义画布区域的 DOM 引用
const renderCanvas = ref<HTMLElement | null>(null);

const handleDragOver = (e: DragEvent) => {
  e.preventDefault();
  e.dataTransfer!.dropEffect = "copy";
};

// 获取一下组件的实例信息 √
// 读取松手时的位置 ×
// 将组件存入数组 √
// 渲染组件 ×
const handleDrop = (event: DragEvent) => {
  event.preventDefault();
  event.stopPropagation();
  try {
    if (event.dataTransfer) {
      const data = JSON.parse(event.dataTransfer.getData("application/json"));
      console.log("接收到的数据:", data);
      // 将数据添加到 canvasDataList
      addCanvasData(data);
    } else {
      console.log("拖放事件的数据传输对象为空");
    }
  } catch (e) {
    console.log("解析数据时发生错误:", e);
  }
};

// 数据列表
const canvasDataList = ref<object[]>([]);

const addCanvasData = (data: any) => {
  // 将数据推入 canvasDataList
  canvasDataList.value = [...canvasDataList.value, data];
};

// 监听 canvasDataList 的变化
watch(
  canvasDataList,
  (newData) => {
    console.log("Canvas data updated:", newData);
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.editor-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;

  .editor-toolbar {
    height: 52px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    border-bottom: 1px solid #e9c5c5;
  }

  .editor-main {
    flex: 1;
    display: flex;
    overflow: hidden;

    section {
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    }

    .editor-left {
      width: 336px;
      overflow: auto;
      padding: 12px;
      border-right: 1px solid #e9c5c5;
      border-bottom: 1px solid #e9c5c5;
    }

    .editor-center {
      flex: 1;
      overflow: hidden;
      margin: 15px;
      border: 1px dashed #ddd;
      background: #fafafa;
    }

    .editor-right {
      width: 340px;
      overflow: auto;
      padding: 12px;
      border-left: 1px solid #e9c5c5;
      border-bottom: 1px solid #e9c5c5;
    }
  }
}
</style>
